import React, { Component } from "react";

class App extends Component {
  // state 的类属性
  state = {
    todos: [
      {
        id: 1,
        text: "(*^_^*)",
      },
      {
        id: 2,
        text: "/(ㄒoㄒ)/~~",
      },
    ],
  };
  render() {
    return (
      <div>
        <section>
          {" "}
          <input></input>
          <button>添加todos</button>
        </section>
        <ul>
          {/* 原始版 */}
          {/* {
            [<li key={this.state.todos[0].id}>{this.state.todos[0].text}</li>,<li key={this.state.todos[1].id}>{this.state.todos[1].text}</li>]
          } */}
          {/* 加强版 */}
          {/* {
            // [<li key={this.state.todos[0].id}>{this.state.todos[0].text}</li>,<li key={this.state.todos[1].id}>{this.state.todos[1].text}</li>]
            this.state.todos.map((v, i) => {
              return <li key={v.id}>{v.text}</li>;
            })
          } */}
          {/* 终极版 */}
          {
            // [<li key={this.state.todos[0].id}>{this.state.todos[0].text}</li>,<li key={this.state.todos[1].id}>{this.state.todos[1].text}</li>]
            this.state.todos.map(v =><li key={v.id}>{v.text}</li>)
          }
          {/* { 有问题
            // [<li key={this.state.todos[0].id}>{this.state.todos[0].text}</li>,<li key={this.state.todos[1].id}>{this.state.todos[1].text}</li>]
            this.state.todos.forEach(v =><li key={v.id}>{v.text}</li>)
          } */}
        </ul>
      </div>
    );
  }
}

export default App;
